<template >
    <section class="jumbotron">
        <h3 class="jumbotron-heading">Search Github Users</h3>
        <div>
            <input type="text" placeholder="enter the name you search" v-model="keyName"/>&nbsp;<button @click="serachName">Search</button>
        </div>
    </section>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            keyName:''
        }
    },
    methods: {
        serachName(){
            this.$bus.$emit('userList',{isFirst:false,isLoad:true,errMsg:'',users:[]})
            axios.get(`https://api.github.com/search/users?q=${this.keyName}`).then(
                response=>{
                    this.$bus.$emit('userList',{isLoad:false,errMsg:'',users:response.data.items})
                },
                error=>{
                    this.$bus.$emit('userList',{isLoad:false,errMsg:error,users:[]})
                }
            )
        }
    },
}
</script>
<style >
    
</style>